<script>
export default {
    props:{
        fetchAddressFn:{
            type:Function,
            default:(kw) => {}
        },
        locationOptions:{
            type:Array,
            default(){
                return []
            }
        },
        value:{
            type:Object,
            required:true,
            default:null
        }
    },
    data() {
        return {
            isFetchAddress:false,
            rules: {
                departureName: [
                    { 
                        required:true,
                        type: 'string',
                        message: '方案名称不能为空',
                        trigger: ['blur', 'change'] 
                    }
                ],
                departureID: [
                    { 
                        required:true,
                        type: 'string',
                        message: '请选择起始地',
                        trigger: ['blur', 'change'] 
                    }
                ],
                programme: [
                    { 
                        required:true,
                        type: 'string',
                        message: '方案详情不能为空',
                        trigger: ['blur', 'change'] 
                    }
                ],
                
            }
            // form: {
            //     departureName: '',
            //     departureID: '',
            //     programme: '',
                // location: null,
                // location: {
                    // name: '',
                    // province:null,
                    // city: null,
                    // area: null,
                    // address: null,
                    // latitude: null,
                    // longitude: null,
                    // scale: null
                // }
            // }
        }
    },
    computed:{
        form:{
            get(){
                console.log(this.value,'value');
                return this.value
            },
            set(v){
                this.$emit('input', v)
            }
        },
        attrs(){
            const attrs = {...this.$attrs}
            
            if(!attrs['rules']){
                attrs['rules'] = this.rules
            }

            return attrs
        },
        listeners(){
            const listeners = { ...this.$listeners }
            return listeners
        },
        locationOptionsFormatted(){
            return this.locationOptions.map(item => {
                const { id, province, city, area, address, name } = item
                return {
                    label: `${name} ${province}${city}${area}${address}`,
                    value:id
                }
            })
        }
    },
    methods:{
        resetFields(){
            if(typeof this.$refs.form?.resetFields !== 'function'){
                console.log('not a fn')
                return
            }
            console.log('resetFields')
            this.$refs.form.resetFields()
        },
        validate(){
            if(typeof this.$refs.form?.validate !== 'function')
                return Promise.resolve()

            return new Promise((resolve, reject) => {
                this.$refs.form.validate(flag => {
                    if(flag){
                        return resolve()
                    }
                    reject(flag)
                })
            })
        },
        addressFormatter(address, maxChars = 40){
            if(typeof address !== 'string')return ''

            if(address.length > maxChars)
                return address.substring(0, maxChars) + '...'

            return address
        },
        async fetchAddress(kw){
            try {
                this.isFetchAddress = true
                const result = await this.fetchAddressFn(kw)
                this.isFetchAddress = false
            }catch(e){
                this.isFetchAddress = false
            }
        }
    }
}
</script>

<template>
    <el-form 
        v-on="listeners" 
        v-bind="attrs" 
        :model="form" 
        ref="form"
        label-width="80px"
    >
        <el-form-item label="方案名称" prop="departureName">
            <el-input v-model="form.departureName" placeholder="请输入方案名称" />
        </el-form-item>

        <el-form-item label="起始地" prop="departureID">
            <el-select 
                style="width: 100%;"
                v-model="form.departureID"
                placeholder="请选择起始地"
                filterable
                remote
                :loading="isFetchAddress"
                :remote-method="fetchAddress"
            >
                <el-option 
                    v-for="item in locationOptionsFormatted" 
                    :key="item.value" 
                    :title="item.label"
                    :label="addressFormatter(item.label)" 
                    :value="item.value"
                />
            </el-select>
        </el-form-item>

        <el-form-item label="方案详情" prop="programme">
            <el-input 
                type="textarea" 
                :rows="8" 
                placeholder="请输入方案详情" 
                v-model="form.programme" 
            />
        </el-form-item>
    </el-form>
</template>

<style lang="scss"></style>